<template>
	<view>
		<view class="voice" @click="showVoice=true">
			<image style="width: 64px; height: 64px; background-color: #eeeeee;" mode="aspectFit" :src="src"></image>
		</view>
		<view class="file-item">
			<luch-audio v-for="(item,index) in audioUrls" :key="index" :src="item.url" :play.sync="item.play"></luch-audio>

		</view>
		<u-popup :show="showVoice">
			<sound-recording @cancel="cancel" @confirm="confirm"></sound-recording>
		</u-popup>

	</view>
</template>

<script>
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import constant from "@/utils/constant.js"
	export default {
		components: {
			soundRecording
		},
		data() {
			return {
				showVoice: false,
				src: "/static/images/luyin.png",
				audioUrls: [],
				uuid: "",
				appendFiles: [],
				originFiles: [],

				fileHost: constant.fileHost,
			}
		},
		onLoad(option) {
			this.uuid = option.uuid;
			if (option.voiceUrls) {
				const voiceUrls = JSON.parse(decodeURIComponent(option.voiceUrls));
				const serverData = voiceUrls.map(item => {
					let url = item;
					if (url.indexOf("/storage") < 0) {
						url = this.fileHost + url;
					}
					this.originFiles.push({
						url: item
					})
					return {
						url: url,
						play: false
					};
				});
				this.audioUrls = [
					...serverData,
					...this.getStoreFile
				];
			} else {
				this.audioUrls = this.getStoreFile;
				this.appendFiles = this.getStoreFile;
			}
		},
		computed: {
			getStoreFile() {
				return this.$store.state.file[`voice_files_${this.uuid}`]?.appendFiles || []
			}
		},
		methods: {
			confirm(voicePath) {
				this.showVoice = false;
				this.audioUrls.push({
					url: voicePath,
					play: false
				});
				this.appendFiles.push({
					url: voicePath,
					play: false
				})
				this.$store.commit('SAVE_VOICE', {
					uuid: this.uuid,
					files: {
						originFiles: this.originFiles,
						appendFiles: this.appendFiles
					}
				});
			},
			cancel() {
				this.showVoice = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.voice {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150px;
		height: 150px;
		background-color: #FFFFFF;
	}

	.file-item {
		padding: 0 10px;
		margin-top: 10px;

		.video-item {
			height: 120px;
			width: 120px;
		}
	}
</style>